<template>
    <div class="app-container">

        <el-form ref="form" :rules="rules" :model="form" label-width="90px">

            <el-form-item label="信息标题"
                          prop="title"
                          required>
                <el-input class="art-input" v-model="form.title"></el-input>
            </el-form-item>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="行业分类"
                                  prop="category"
                                  required>
                        <el-select v-model="form.category" placeholder="选择分类">
                            <el-option
                                    v-for="item in industries"
                                    :key="item.name"
                                    :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="信息类型" prop="infoType" required>
                        <el-select  v-model="form.infoType"
                                    placeholder="信息类型"
                                    disabled>
                            <el-option
                                    v-for="item in infoTypes"
                                    :key="item.code"
                                    :value="item.code"
                                    :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="8">
                    <el-form-item label="物业类型" prop="estateType" required>
                        <el-select v-model="form.estateType"
                                   placeholder="物业类型"
                                   disabled>
                            <el-option
                                    v-for="item in estateTypes"
                                    :key="item.code"
                                    :value="item.code"
                                    :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="商铺类型"
                                  prop="estate.type"
                                  required>
                        <el-select v-model="form.estate.type" placeholder="选择类型">
                            <el-option
                                    v-for="item in storeTypes"
                                    :key="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="商铺面积" prop="estate.area" required>
                        <el-input v-model.number="form.estate.area">
                            <template slot="append">m<sup>2</sup></template>
                        </el-input>
                    </el-form-item>

                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8">
                    <el-form-item label="转让费" prop="estate.transferFee" required>
                        <el-input placeholder="转让费" v-model.number="form.estate.transferFee">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="浮动" >
                        <el-input placeholder="浮动" v-model.number="form.estate.offset">
                            <template slot="prepend">+/-</template>
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="租金" prop="estate.rental" required>
                        <el-input placeholder="租金" v-model.number="form.estate.rental">
                            <template slot="append">元/月</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物业费"  prop="estate.propertyFee"  required>
                        <el-input placeholder="物业费" v-model.number="form.estate.propertyFee">
                            <template slot="append">元/月</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8">
                    <el-form-item label="区域商圈" >
                        <el-cascader
                                :options="areas"
                                v-model="formHelper.areas">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="地铁站点">
                        <el-cascader
                                :options="subways"
                                v-model="formHelper.subway">
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="性质">
                <el-checkbox v-model="form.estate.canBargaining">可面议</el-checkbox>
                <el-checkbox v-model="form.estate.canEmptyAttorn">可空转</el-checkbox>
                <el-checkbox v-model="form.estate.isOperating">营业中</el-checkbox>
                <el-checkbox v-model="form.isPreference">腾铺优选</el-checkbox>
            </el-form-item>
            <el-form-item label="详细地址" prop="estate.location" required>
                <el-input class="art-input" v-model="form.estate.location"></el-input>
            </el-form-item>

            <el-row>
                <el-col :span="6">
                    <el-form-item label="联系人">
                        <el-input v-model="form.contact.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系电话">
                        <el-input v-model="form.contact.phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="QQ">
                        <el-input v-model="form.contact.qq"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="微信">
                        <el-input v-model="form.contact.weixin"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item label="内容" prop="content" required>
                <editor v-model="form.content"></editor>
            </el-form-item>

            <el-form-item label="图片" required>
                <el-upload
                        drag
                        multiple
                        :action="UPLOAD_API"
                        list-type="picture-card"
                        :file-list="formHelper.fileList"
                        :before-upload="beforeUpload"
                        :on-success="handleUploadSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleUploadRemove">
                    <i class="el-icon-plus"></i>
                    <div class="upload-text">点击或将文件拖到此处</div>
                </el-upload>
                <el-dialog v-model="UIState.dialogVisible" size="tiny">
                    <img width="100%" :src="UIState.dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="被查看次数">
                        <el-input-number v-model="form.viewCount"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>
  import industries from '@/data/industries.json';
  import storeTypes from '@/data/store-types.json';
  import infoTypes from '@/data/info-types.json';
  import estateTypes from '@/data/estate-types.json';
  import fetch from '@/utils/fetch';
  import Editor from '@/components/Editor'
  import { mapGetters } from 'vuex';

  export default {
    computed: {
      ...mapGetters([
        'site',
        'city'
      ])
    },
    components: {
      Editor
    },
    data() {
      return {
        isNew: true,
        industries: industries,
        storeTypes: storeTypes,
        infoTypes: infoTypes,
        estateTypes: estateTypes,
        UPLOAD_API: process.env.BASE_API + '/upload',
        subways: [],
        areas: [],
        form: {
          category: '',
          contact: {
            name: '',
            phone: '',
            qq: '',
            weixin: ''
          },
          content: '',
          estate: {
            type: '',
            isOperating: true,
            transferFee: 10000,
            offset: 100,
            canBargaining: true,
            canEmptyAttorn: true,
            area: 50,
            rental: 50,
            propertyFee: 2000,
            location: '',
            province: '',
            city: '',
            district: '',
            street: '',
            shopArea: '',
            subway: '',
            station: ''
          },
          estateType: 'Store',
          images: [],
          infoSource: 'TENGPU',
          infoType: 'Attorn',
          isDeleted: false,
          isPreference: true,
          isTraded: false,
          level: 0,
          site: '',
          city: '',
          tags: [],
          title: '',
          viewCount: 10
        },
        formHelper: {
          subway: [],
          areas: [],
          fileList: []
        },
        rules: {
          title: { required: true, message: '请输入标题', trigger: 'blur' },
          category: { required: true, message: '请选择行业分类', trigger: 'change' },
          infoType: { required: true, message: '请选择信息分类', trigger: 'change' },
          estateType: { required: true, message: '请选择物业类型', trigger: 'change' },
          type: { required: true, message: '请选择商铺类型', trigger: 'change' },
          area: { required: true, message: '请输入商铺面积', trigger: 'blur' },
          transferFee: { required: true, message: '请输入转让费', trigger: 'blur' },
          rental: { required: true, message: '请输入租金', trigger: 'blur' },
          propertyFee: { required: true, message: '请输入物业费', trigger: 'blur' },
          location: { required: true, message: '请输入详细地址', trigger: 'blur' },
          content: { required: true, message: '请输入内容', trigger: 'blur' },

        },
        UIState: {
          dialogImageUrl: '',
          dialogVisible: false
        }
      }
    },
    created() {
      if (this.$route.params.id) {
        this.isNew = false;
        this.fetchInfoData();
      }
      this.fetchCityData();
    },
    methods: {
      onReset() {
        this.$refs.form.resetFields();
      },
      onSubmit() {
        this.form.images = this.formHelper.fileList.map((file)=> {
          if (file.response && file.response.ops.length) {
            return file.response.ops[0].path;
          } else if (file.url) {
            return file.url
          }
        });

        this.form.site = this.site;
        this.form.estate.district = this.formHelper.areas[0];
        this.form.estate.shopArea = this.formHelper.areas[1];
        this.form.estate.subway = this.formHelper.subway[0];
        this.form.estate.station = this.formHelper.subway[1];


        this.$refs.form.validate((valid) => {
          if (valid) {
            fetch({
              url: '/info' + (this.isNew ? '' : '/' + this.$route.params.id),
              method: this.isNew ? 'post' : 'put',
              data: JSON.parse(JSON.stringify(this.form))
            }).then(res => {

              if (res.status === 200) {
                this.$message('保存成功');
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleUploadSuccess(response, file, fileList) {
        this.formHelper.fileList = fileList;
      },
      handleUploadRemove(file, fileList) {
        this.formHelper.fileList = fileList;
      },
      handlePictureCardPreview(file) {
        this.UIState.dialogImageUrl = file.url;
        this.UIState.dialogVisible = true;
      },
      beforeUpload(file) {
        const isIMG = (file.type === 'image/jpeg' || 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;
        const isNum = this.formHelper.fileList.length < 8;

        if (!isIMG) {
          this.$message.error('只能上传jpg或png格式图片');
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过2MB');
        }
        if (!isNum) {
          this.$message.error('图片不能超过8张');
        }
        return isIMG && isLt2M && isNum;
      },
      fetchInfoData() {
        return fetch({
          url: '/info/' + this.$route.params.id,
          method: 'get',
        }).then(res => {
          debugger
          Object.assign(this.form, res.data);

          this.formHelper.areas.push(this.form.estate.district);
          this.formHelper.areas.push(this.form.estate.shopArea);
          this.formHelper.subway.push(this.form.estate.subway);
          this.formHelper.subway.push(this.form.estate.station);
          this.formHelper.fileList = this.form.images.map((img)=>{
            return {
              name: '',
              status:"success",
              url: img
            }
          });
        })
      },
      fetchCityData() {
        return fetch({
          url: '/city/' + this.city,
          method: 'get'
        }).then(res => {
          if(res.data.areas){
            this.areas = res.data.areas.map((item)=> {
              return {
                label: item.name,
                value: item.name,
                children: item.shopAreas.map((area)=>{
                  return {
                    label: area.name,
                    value: area.name,
                  }
                })
              }
            });
          }

          if(res.data.subways){
            this.subways = res.data.subways.map((item)=> {
              return {
                label: item.name,
                value: item.name,
                children: item.stations.map((station)=>{
                  return {
                    label: station,
                    value: station,
                  }
                })
              }
            });
          }
        })
      }
    }
  }
</script>
